<template>
    <div>
        {{ student.name }}-{{ student.age }}-{{ genderStr }}<br />
        <button @click="changeGender">修改性别</button>
    </div>
</template>
<script setup>
import { computed, reactive } from 'vue';

let student = reactive({
    name: '张三',
    age: 22,
    gender: 1
});

const genderStr = computed({
    set: function (newValue) {
        console.log(newValue)
        if (newValue == '男') {
            student.gender = 1;
        } else if (newValue == '女') {
            student.gender = 0;
        }
    },
    get: function () {
        return student.gender == 1 ? '男' : '女';
    }
});
const changeGender = () => {
    genderStr.value = '女';
}
</script>
<!-- <script>
import { computed, reactive } from 'vue';

export default {
    setup() {
        let student = reactive({
            name: '张三',
            age: 22,
            gender: 1
        });

        // let genderStr = computed(() => {
        //     return student.gender == 1 ? '男' : '女';
        // });
        const genderStr = computed({
            set: function (newValue) {
                console.log(newValue)
                if (newValue == '男') {
                    student.gender = 1;
                } else if (newValue == '女') {
                    student.gender = 0;
                }
            },
            get: function () {
                return student.gender == 1 ? '男' : '女';
            }
        });
        const changeGender = () => {
            genderStr.value = '女';
        }

        return {
            student, genderStr, changeGender
        }
    }
}
</script> -->